<template>
  <div class="comments-container">
    <!-- 评论输入框 -->
    <div class="comment-input">
      <textarea v-model="newComment" placeholder="发表你的评论..." class="comment-textarea"></textarea>
      <button @click="submitComment" class="submit-button">发布</button>
    </div>

    <!-- 评论列表 -->
    <div class="comment-list">
      <div v-for="(comment, index) in comments" :key="index" class="comment-item">
        <div class="comment-header">
          <span class="comment-author">{{ comment.author }}</span>
          <span class="comment-time">{{ comment.time }}</span>
        </div>
        <div class="comment-content">{{ comment.content }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Comments",
  data() {
    return {
      newComment: "", // 新评论的内容
      comments: [
        // 示例评论数据
        {
          author: "张三",
          time: "2025-04-27 14:30",
          content: "这个运动搭子真不错！"
        },
        {
          author: "李四",
          time: "2025-04-27 15:00",
          content: "下次一起约运动吧！"
        },
        {
          author: "用户",
          time: "2025-04-28 12:47:10",
          content: "你好"
        }
      ]
    };
  },
  methods: {
    submitComment() {
      if (this.newComment.trim() === "") {
        alert("评论不能为空！");
        return;
      }
      // 添加新评论
      this.comments.push({
        author: "用户", // 这里可以替换为当前登录用户的名称
        time: this.getCurrentTime(),
        content: this.newComment
      });
      // 清空输入框
      this.newComment = "";
    },
    getCurrentTime() {
      const now = new Date();
      return now.toISOString().replace("T", " ").substring(0, 19);
    }
  }
};
</script>

<style scoped>
.comments-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 16px; /* 增加圆角半径 */
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.comment-input {
  display: flex;
  margin-bottom: 20px;
  align-items: flex-start;
}

.comment-textarea {
  flex: 1;
  min-height: 80px;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px; /* 增加圆角半径 */
  resize: none;
  margin-right: 10px;
}

.submit-button {
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 14px; /* 增加圆角半径 */
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-button:hover {
  background-color: #45a049;
}

.comment-list {
  list-style: none;
  padding: 0;
}

.comment-item {
  border: 1px solid #e0e0e0;
  border-radius: 14px; /* 增加圆角半径 */
  padding: 15px;
  margin-bottom: 10px;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.comment-item:last-child {
  margin-bottom: 0;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.comment-author {
  font-weight: bold;
  color: #333333;
}

.comment-time {
  font-size: 0.85em;
  color: #999999;
}

.comment-content {
  margin-top: 5px;
  font-size: 1em;
  color: #333333;
}
</style>